<!-- @author zhengjie -->
<template>
  <div>


    <!-- 侧边导航++++++++++++++++++++++ -->

    <el-menu :router=true :default-active="defaultActive" class="elmenu" background-color="#fff" text-color="#000"
      active-text-color="#fff">

      <el-menu-item index="/mine/videoCateg" class="item_nav" style="margin-top: 60px;">
        <template slot="title">
          <span>客户端</span>
          <img style="height: 10px;width: 14px;margin-right: 10px;margin-left: 15px;" src="@/assets/images/qhqy.png" />
        </template>
      </el-menu-item>


      <el-menu-item index="/mine/videoCateg" class="item_nav" style="margin-top: 30px;">
        <template slot="title">
          <span>服务端</span>
          <img style="height: 10px;width: 14px;margin-right: 10px;margin-left: 15px;" src="@/assets/images/qhqy.png" />
        </template>
      </el-menu-item>



      <el-menu-item index="/mine/videoCateg" class="item_nav" style="margin-top: 30px;">
        <template slot="title">
          <span>版本开发</span>
          <img style="height: 10px;width: 14px;margin-right: 10px;margin-left: 15px;" src="@/assets/images/qhqy.png" />
        </template>
      </el-menu-item>










    </el-menu>




    <!-- 侧边导航=============== -->
  </div>
</template>

<script>
  import {
    getToken,
    setToken,
    removeToken
  } from '@/utils/auth';
  export default {
    name: 'Sidebar',
    props: {
      defaultActive: {
        type: String,
        default: '/mine/myCenter'
      }
    },
    data() {
      return {
        game_id: '',
        game_name: '',
        game_logo: ''
      };
    },
    created() {
      this.game_id = localStorage.getItem('game_id');
      this.game_name = localStorage.getItem('game_name');
      this.game_logo = localStorage.getItem('game_logo');
    },
    methods: {}
  };
</script>



<style lang="scss" scoped>
  .elmenu {
    height: 100vh;
    width: 100%;
  }



  ::v-deep .el-submenu__title {
    font-size: 28px;
  }

  ::v-deep .el-menu-item.is-active {
    background: #779efe !important;
  }

  ::v-deep .el-menu-item * {
    font-size: 18px;
  }

  ::v-deep .el-menu-item.is-active {
    // background: #779efe !important;

    // position: relative;

    // width: 300px;
    // height: 56px;
    // background-color: #000;
    // color: #fff;
  }

  ::v-deep .el-menu-item.is-active::after {
    // content: '';
    // position: absolute;
    // right: -28px;
    // z-index: 1000;
    // border-top: 28px solid transparent;
    // border-bottom: 28px solid transparent;
    // border-left: 28px solid #779efe;

  }


  ::v-deep .el-menu .el-menu-item:hover {
    color: #fff !important;
    background: #10121a !important;
  }



  ::v-deep .el-menu .el-menu-item.is-active {
    color: #fff !important;
    background: #red !important;



  }

  .el-submenu ::v-deep .el-submenu__title:hover {
    color: #fff !important;
    background: #000 !important;


  }

  .logon {
    margin-top: 50px;
    width: 72px;
    height: 72px;
    background: #ffffff;
    border-radius: 50%;
    margin-left: 60px;
  }

  ::v-deep .el-menu .el-menu-item:hover {
    color: #fff !important;
    background: #d5e1ed !important;
  }
</style>
